<template>
  <el-dialog v-model="dialogVisible" :title="`${parameter.title}的权限`" :destroy-on-close="true" width="380px" draggable>
    <div class="tree-container">
      <el-tree
        :data="data"
        show-checkbox
        node-key="menuId"
        :default-checked-keys="checkedKeys"
        :props="defaultProps"
        @check="checkChange"
      />
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="Permission">
import { onMounted, ref } from "vue";
import { getAuthMenuListApi, getUserMenuArr } from "@/api/modules/login";
import { setUserMenu } from "@/api/modules/user";
import { ElMessage } from "element-plus";
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const defaultProps = {
  children: "children",
  label: data => {
    return data.titleCollection ? data.titleCollection.join(" ") : data.meta.title;
  }
};

const data = ref();
onMounted(async () => {
  let param = await getAuthMenuListApi();
  data.value = param.data;
});

export interface ExcelParameterProps {
  title: string; // 标题
  fileSize?: number; // 上传文件的大小
  fileType?: File.ExcelMimeType[]; // 上传文件的类型
  tempApi?: (params: any) => Promise<any>; // 下载模板的Api
  importApi?: (params: any) => Promise<any>; // 批量导入的Api
  getTableList?: () => void; // 获取表格数据的Api
}

const save = async () => {
  console.log("保存操作");
  let res = await setUserMenu(checkedKeys.value, parameter.value.id);
  if (res.code === 200) {
    ElMessage.success("保存成功");
  } else {
    ElMessage.error("保存失败");
  }
  console.log(res);
  // 这里添加保存逻辑
  dialogVisible.value = false;
};
const checkedKeys = ref([]);
const checkChange = (checkedNodes, allcheckedKeys) => {
  console.log("已选中的节点:", checkedNodes);
  console.log("已选中的节点的键值:", allcheckedKeys);
  checkedKeys.value = allcheckedKeys.checkedKeys;
};
// dialog状态
const dialogVisible = ref(false);
// 父组件传过来的参数
const parameter = ref({
  id: "",
  title: ""
});

// 接收父组件参数
const acceptParams = async (params: ExcelParameterProps) => {
  parameter.value = { ...parameter.value, ...params };
  dialogVisible.value = true;
  let chKeys = await getUserMenuArr(parameter.value.id);
  console.log(chKeys, "chKeys");
  checkedKeys.value = chKeys.data;
};

// Excel 导入模板下载

defineExpose({
  acceptParams
});
</script>
<style lang="scss" scoped>
@use "./index.scss";
</style>
